<template>
  <div class="search-condition-item-main-content">
    <span class="search-condition-item-label" :title="attr.title">{{
      attr.title ? attr.title : ''
    }}</span>
    <a-select
      class="search-condition-item-widget search-condition-item-widget-mult-select"
      ref="multipleSelect"
      :value="newValue"
      mode="multiple"
      showArrow="true"
      :disabled="attr.disabled"
      optionFilterProp="showName"
      :open="dropdownVisible"
      @blur="onBlur"
      @dropdownVisibleChange="onDropdownVisibleChange"
      @change="onValueChange"
      @inputKeydown="onKeyChange">
      <a-select-option
        v-for="(item, index) in attr.items"
        :value="item.value"
        :key="item.value"
        :showName="item.title"
        ><span
          :title="isShowTitle[index] ? item.title : null"
          @mouseenter="handleOptionMouseEnter($event, index)"
          >{{ item.title }}</span
        ></a-select-option
      >
    </a-select>
  </div>
</template>

<script>
  export default {
    props: {
      attr: {
        type: Object,
        default: {
          title: '',
          items: []
        }
      },
      value: {
        type: Object,
        default: []
      }
    },
    data() {
      return {
        newValue: this.value ? this.value : [],
        isShowTitle: {},
        dropdownVisible: false
      };
    },
    watch: {
      value(newVal, oldVal) {
        this.newValue = newVal ? newVal : [];
      }
    },
    methods: {
      onBlur() {
        if (this.value) {
          if (this.value.length != this.newValue.length) {
            this.emitValueChange();
          } else {
            const obj = {};
            this.value.forEach((element) => {
              obj[element] = true;
            });
            for (let i = 0; i < this.newValue.length; ++i) {
              if (!obj[this.newValue[i]]) {
                this.emitValueChange();
                break;
              }
            }
          }
        } else if (this.newValue.length > 0) {
          this.emitValueChange();
        }
      },
      onValueChange(value) {
        this.newValue = value;
        // if (this.newValue.length != value.length) {
        // this.$emit('valueChange', { key: this.attr.key, value: value.length > 0 ? value : null });
        // }
        if (!this.dropdownVisible) {
          this.onBlur();
        }
      },
      onDropdownVisibleChange(open) {
        this.dropdownVisible = open;
      },
      emitValueChange() {
        this.$emit('valueChange', {
          key: this.attr.key,
          value: this.newValue.length > 0 ? this.newValue : null
        });
      },
      handleOptionMouseEnter(ev, index) {
        if (this.isShowTitle[index] !== undefined) {
          return;
        }
        if (ev.target.parentElement.clientWidth < ev.target.parentElement.scrollWidth) {
          this.$set(this.isShowTitle, index, true);
        } else {
          this.$set(this.isShowTitle, index, false);
        }
      },
      onKeyChange(e) {
        if (e.key === 'Enter') {
          this.dropdownVisible = false;
          this.onBlur();
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .search-condition-item-widget-mult-select .ant-select-selection--multiple {
    min-height: 30px;
    height: 30px;
  }

  ::v-deep .ant-select-selection__rendered {
  }

  ::v-deep .ant-select-show-arrow .ant-select-selection--multiple .ant-select-selection__rendered {
    overflow: hidden;
    height: 28px;
    margin-right: 30px;
    display: flex;
    align-items: center;

    ul {
      display: flex;

      li {
        flex-shrink: 0;
        margin-top: 0;
      }
    }
  }

  .search-condition-item-main-content:hover {
    &::v-deep .ant-select-selection__rendered {
      display: block;
      cursor: pointer;
      overflow-y: hidden;
      overflow-x: auto;
      padding-top: 2px;
    }
    &::v-deep .ant-select-search--inline {
      padding-top: 2px;
    }
  }

  /* .search-condition-item-widget-mult-select .ant-select-selection__choice__remove {
                                                                                                  display: none;
                                                                                                }
                                                                                                .search-condition-item-widget-mult-select .ant-select-selection__choice {
                                                                                                  padding-right: 10px;
                                                                                                } */
</style>
